﻿<section>
    <div class="control-panel row">
        <div class="col-md-1" style="width: 140px;">
            <h1 class="title">Nahlo</h1>
        </div>
        <div class="col-md-2 new-station">
            <div class="input-group">
                <span class="input-group-btn">
                    <button class="btn btn-success" type="button">New Station</button>
                </span>
                <input type="text" class="search-query form-control" placeholder="Type an artist, album, or genre" />
            </div>
        </div>
        <div class="col-md-5">
            <div class="song-control thumb-down-button" data-bind="event: { click: dislikeCurrentSong, touchstart: dislikeCurrentSong }" title="Dislike this song. We'll put this one on the backburner and play less like it.">
                <i class="fa fa-thumbs-o-down"></i>
            </div>
            <div class="song-control thumb-up-button" data-bind="event: { click: likeCurrentSong, touchstart: likeCurrentSong }" title="Like this song. We'll play this song, and others like it, more often.">
                <i class="fa fa-thumbs-o-up"></i>
            </div>
            <div class="song-control play-button" data-bind="click: playPause">
                <i class="fa" data-bind="css: { 'fa-play': isPaused, 'fa-pause': !isPaused() }" style="font-size: 22px; margin-top: 5px;"></i>
            </div>
            <div class="song-control next-song-button" data-bind="click: playNextSong" title="Next song">
                <i class="fa fa-fast-forward"></i>
            </div>
            <div class="song-control song-request-button" title="Got a song request? We'll play whatever's on your mind.">
                <i class="fa fa-bullhorn"></i>
            </div>
            <br />
            <div class="trackbar-panel" data-bind="with: player">
                <span data-bind="text: playedTimeText"></span>
                <div class="trackbar"></div>
                <span data-bind="text: remainingTimeText"></span>
            </div>
        </div>
        <div class="col-md-3 pull-right current-song-info" data-bind="with: player.song">
            <img class="album-art" data-bind="attr: { src: albumArtUri }" />
            <div class="name" data-bind="text: name"></div>
            <div class="artist"><span>by </span><span data-bind="text: artist"></span></div>
            <div class="album"><span>on </span><span data-bind="text: album"></span></div>

        </div>
    </div>

    <div class="main-content">
        <div class="row">
            <div class="col-md-12 now-playing-header">
                <div class="item">
                    <i class="icon-home"></i><span>Now Playing</span>
                </div>
                <div class="item">
                    <i class="icon-comments"></i><span>Music Feed</span>
                </div>
                <div class="item">
                    <i class="icon-user"></i><span>My Profile</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="station-pane col-md-3">
                <ul class="list-unstyled">
                    <li class="station-item">
                        <i class="icon-random"></i>
                        <span>Shuffle</span>
                    </li>
                    <li class="station-item">
                        <span>Example station 1</span>
                        <i class="icon-caret-right pull-right"></i>
                    </li>
                    <li class="alert station-item alert-info">
                        <span>Modern rock</span>
                        <i class="icon-caret-right pull-right"></i>
                    </li>
                    <li class="station-item">
                        <span>Old school reggae</span>
                        <i class="icon-caret-right pull-right"></i>
                    </li>
                </ul>
            </div>
            <div class="col-md-9 album-art-pane" data-bind="foreach: player.playedSongs">
                <div class="song-tile">
                    <img class="album-art" data-bind="attr: { src: albumArtUri }">
                </div>
            </div>
            <div class="col-md-9 album-art-info-pane">
                <div class="group" data-bind="with: player.song">
                    <div class="name" data-bind="text: name"></div>
                    <div><span class="prefix">by </span><span class="artist" data-bind="text: artist"></span></div>
                    <div><span class="prefix">on</span> <span class="album" data-bind="text: album"></span></div>
                </div>
                <i class="icon-caret-up icon-4x"></i>
            </div>
            <div class="col-md-9 buy-share-pane">
                <div class="group">
                    <a class="btn btn-primary btn-sm" href="#" target="_blank" data-bind="attr: { href: twitterShareLink }" title="Share song on Twitter"><i class="icon-twitter"></i> Share...</a>
                    <button class="btn btn-primary btn-sm"><i class="icon-shopping-cart"></i> Buy</button>
                </div>
            </div>
            <div class="col-md-9 song-info-pane" data-bind="with: player.song">
                <div>
                    <span class="header">Lyrics</span>
                    <div class="no-lyrics" data-bind="visible: !lyrics">Lyrics not available</div>
                    <div class="lyrics" data-bind="visible: lyrics, text: lyrics"></div>
                    <a href="#lyricsModal" data-toggle="modal" data-bind="visible: lyrics">full lyrics</a>
                </div>
                <hr style="margin-top: 10px; margin-bottom: 10px;" />
                <div class="artist-info">
                    <span class="header">About </span>
                    <span class="header" data-bind="text: artist"></span>
                    <div class="no-lyrics" data-bind="visible: !$root.currentArtistBio">No bio available</div>
                    <div class="bio" data-bind="text: $root.currentArtistBio, visible: $root.currentArtistBio"></div>
                    <a href="#artistBioModal" data-toggle="modal" data-bind="visible: $root.currentArtistBio">full bio</a>
                </div>
                <hr style="margin-top: 10px; margin-bottom: 10px;" />
                <span class="header">Genres</span>
                <div class="no-lyrics" data-bind="visible: !genres">No genres listed for this song</div>
                <div class="genres" data-bind="if: genres && genres.length > 0">
                    <div data-bind="foreach: genres.split(',')">
                        <a class="genre" href="#" data-bind="text: $data"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="lyricsModal" class="modal fade" data-bind="with: player.song">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 data-bind="text: artist + ' - ' + name"></h3>
                </div>
                <div class="modal-body">
                    <h4>Lyrics</h4>
                    <p class="full-lyrics" data-bind="text: lyrics"></p>
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                </div>
            </div>
        </div>
    </div>

    <div id="artistBioModal" class="modal fade" data-bind="with: player.song">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 data-bind="text: artist"></h3>
                </div>
                <div class="modal-body">
                    <h4>About the artist</h4>
                    <p class="full-artist-bio" data-bind="text: $root.currentArtistBio"></p>
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                </div>
            </div>
        </div>
    </div>

    <div id="player-container"></div>
    <div id="player"></div>
    <audio id="audioElement"></audio>
</section>